<!-- 富文本编辑器wangeditor -->
<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar"></div>
    <div ref="editor" class="text"></div>
  </div>
</template>

<script>
import { client } from '../utils/alioss'
import E from 'wangeditor'
export default {
  name: 'editoritem',
  data() {
    return {
      // uploadPath,
      editor: null,
      info_: null,
      urls: [], // 编辑器中上传的图片
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: 300,
    },
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value: function (value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    },
    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  mounted() {
    this.seteditor()
    this.editor.txt.html(this.value)
  },
  methods: {
    seteditor() {
      // http://192.168.2.125:8080/admin/storage/create
      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
      const SINA_URL_PATH =
        'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal'
      this.editor.config.emotions = [
        {
          title: '新浪', // tab 的标题
          type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
          content: [
            {
              alt: '[坏笑]',
              src: `${SINA_URL_PATH}/50/pcmoren_huaixiao_org.png`,
            },
            { alt: '[舔屏]', src: `${SINA_URL_PATH}/40/pcmoren_tian_org.png` },
            { alt: '[污]', src: `${SINA_URL_PATH}/3c/pcmoren_wu_org.png` },
          ],
        },
        {
          title: 'emoji', // tab 的标题
          type: 'emoji', // 'emoji' / 'image'
          // emoji 表情，content 是一个数组即可
          content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(
            /\s/,
          ),
        },
      ]

      const _this = this
      //使用文档设置高度不起作用，这样动态设置编辑区域高度
      let eds = document.getElementsByClassName('text')
      eds[0].style = eds[0].style.cssText + 'height:' + this.height + 'px'

      // this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
      // this.editor.config.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址
      // this.editor.config.uploadImgHeaders = { }// 自定义 header
      // this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
      // this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      // this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
      // this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间

      // 配置菜单
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        // 'italic', // 斜体
        // 'underline', // 下划线
        // 'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'emoticon', // 表情
        'image', // 图片
        // 'backColor', // 背景颜色
        'justify', // 对齐方式
        'undo', // 撤销
        'redo', // 恢复
      ]

      this.editor.config.onchange = (html) => {
        console.log(this.editor.txt.text());
        this.info_ = html // 绑定当前逐渐地值
        // this.$emit('change', this.info_) // 将内容同步到父组件中
      }

      // 上传本地图片的回调
      this.editor.config.customUploadImg = async function (
        resultFiles,
        insertImgFn,
      ) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        var fileName = 'diary/add/' + `${Date.parse(new Date())}` + '.jpg'
        client()
          .multipartUpload(fileName, resultFiles[0])
          .then(() => {
            // this.$message.success('上传成功！')
            let url =
              'https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/' +
              fileName
            insertImgFn(url)
            // console.log(url);
            _this.urls.push(url);
            console.log(_this.urls);
          })

        //创建一个空对象实例
        // var formData = new FormData()
        // client()
        //   .put('/diary', resultFiles)
        //   .then(function (res) {
        //     // 上传图片，返回结果，将图片插入到编辑器中
        //     insertImgFn(res.url)
        //   })
        //   .catch(function (err) {
        //     console.log(err)
        //   })
      }

      // 上传网络图片的回调
      this.editor.config.linkImgCallback =async function(src){
        console.log(src);
      }

      // 创建富文本编辑器
      this.editor.create()
    },
  },
}
</script>

<style lang="scss" scoped>
.editor {
  width: 99%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  opacity: 0.6;
}
.toolbar {
  border: 1px solid #ccc;
}
.text {
  border: 1px solid #ccc;
  height: 300px;
  overflow-y: scroll;
  width: 100%;
  padding: 0;
  background: #fff;
  color: #303133;
}
</style>
